<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>&lt;canvas&gt;</title>
</head>
<body>
    <canvas width="500" height="500">
        抱歉，你的浏览器不支持 canvas 元素
        （这些内容将会在不支持&lt;canvas&gt;元素的浏览器或是禁用了 JavaScript
        的浏览器内渲染并展现）
    </canvas>
    <a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas">MDN &lt;canvas&gt;</a>
    <script>
        var canvas = document.querySelector("canvas")
        var ctx = canvas.getContext("2d") // 获取绘图上下文
        ctx.beginPath()
        ctx.strokeStyle = "red" // 设置轮廓的颜色
        // 绘制直线
        ctx.moveTo(10,20) 
        ctx.lineTo(100,200)
        ctx.stroke()

        // 绘制正方形
        // ctx.fillStyle = "green";
        // ctx.fillRect(10, 10, 100, 100);
    </script>
</body>
</html>